<div class="row clearfix" [@routerTransition]>




    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">


        <div class="card main-content">
            <div class="header">


                <div class="row clearfix">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <h2>
                            {{l('phonebook')}} ({{people.length}})
                            <small>联系人列表</small>
                        </h2>
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 align-right ">
                        <button class="btn btn-primary blue" (click)="createPerson()">
                            <i class="fa fa-plus"></i>{{l('CreateNewPerson')}}
                        </button>
                    </div>

                </div>

                <div class="row">

                </div>


                <div class="row clearfix  ">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                        <div class="  input-group   btn-group btn-primary form-group                  ">
                            <input [(ngModel)]="filter" name="filterText" auto-focus class="form-control " [placeholder]="l('SearchWithThreeDot')" type="text">
                            <span class="input-group-btn">
                                <button (click)="refresh()" class="btn btn-default" type="submit">
                                    <i class="icon-magnifier"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>



            </div>




            <div class="row  ">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <div class="body">

                        <div class="list-group">
                            <div class="list-group-item   " *ngFor="let person of people">

                                <h5 class="list-group-item-heading  ">
                                    姓名：{{person.name}} 地址：{{person.address}}

                                    <span class="buttons">
                                        <button (click)="editPerson(person)" title='编辑联系人' class="btn btn-circle btn-icon-only color-code green">
                                            <i class="icon-pencil"></i>
                                        </button>
                                        <button (click)="editPhoneNumbersByPerson(person)" title='修改电话本内容' class="btn btn-circle btn-icon-only " href="javascript:;">
                                            <i class="icon-calendar"></i>
                                        </button>
                                        <button (click)="delete(person)" title="删除联系人" class="btn btn-circle btn-icon-only red delete-person" href="javascript:;">
                                            <i class="icon-trash"></i>
                                        </button>
                                    </span>

                                </h5>
                                <p class="list-group-item-text">
                                    电子邮箱：{{person.emailAddress}}</p>

                                <div *ngIf="person==editingPerson" class="table-responsive">

                                    <table class="table table-hover ">


                                        <thead>
                                            <tr>
                                                <th style="width:10%">{{l('Actions')}}</th>
                                                <th style="width:15%">{{l("Type")}}</th>
                                                <th style="width:75%">{{l("PhoneNumber")}}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr *ngFor="let phone of person.phoneNumbers">

                                                <td>
                                                    <button (click)="deletePhoneNumer(phone, person)" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </td>


                                                <td>{{phone.typeDescription}}</td>

                                                <td>{{phone.number}}</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <button (click)="savePhoneNumber()" class="btn btn-sm btn-success">
                                                        <i class="fa fa-floppy-o"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    <select name="Type" [(ngModel)]="newPhoneNumber.type" class="form-control">

                                                        <option *ngFor="let numberType of phonenumberTypeList" [value]=numberType.value>{{numberType.key}}</option>

                                                        <!-- <option value="1">移动电话</option>
                                                        <option value="2">家庭</option>
                                                        <option value="3">公司</option> -->
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" name="number" [(ngModel)]="newPhoneNumber.number" class="form-control" />
                                                </td>
                                            </tr>
                                        </tbody>


                                    </table>
                                </div>


                            </div>
                        </div>


                    </div>






                </div>



            </div>
        </div>






    </div>





</div>

<app-create-or-edit-person-modal #createOrEditPersonModal (modalSave)="refresh()"></app-create-or-edit-person-modal>
